<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>详情页</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<style>
		.el-collapse-item__header{
			width: 100%;
		}
	</style>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box top-sch-boxtwo flex-col">
		<ul>
			<li class="cur"><a href="#">商品</a></li>
			<li><a href="#">详情</a></li>
			<li><a href="#">评价</a></li>
		</ul>
	</div>
	<a class="btn" href="#">
		<i class="iconfont icon-gouwuche"></i>
		<span>2</span>
	</a>
</header>
<!--header end-->
<div id="app">
	<div class="warp warptwo clearfloat">
		<div class="detail clearfloat">
			<!--banner star-->
			<comp3 v-bind:ext3="product"></comp3>

			<!--banner end-->

			<comp1 v-bind:ext="product"></comp1>

			<div class="middle clearfloat box-s">
				<a href="#">
					<span class="fl">商品评价</span>
					<i class="iconfont icon-jiantou1 fr"></i>
				</a>
			</div>
			<div class="middle clearfloat box-s">
				<!--				<a href="#">-->
				<!--					<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">-->
				<!--						商品详情-->
				<!--					</el-button>-->
				<!--					<span class="fl">-->
				<el-collapse v-model="activeNames" @change="handleChange">
					<el-collapse-item title="商品详情" name="1">
						<div>
							<p>类型：{{product.itemType? product.itemType: '这是商品类型'}}</p>

							<p>名称：{{product.title? product.title: '这是商品详情'}}</p>

							<p>促销：{{product.sellPoint? product.sellPoint: '这是商品详情'}}</p>

						</div>
					</el-collapse-item>
				</el-collapse>
				<!--					</span>-->
				<!--					<i class="iconfont icon-jiantou1 fr"></i>-->
				<!--				</a>-->
			</div>
		</div>
	</div>

	<!--footerone star-->
	<div class="footerone clearfloat">
		<div class="left clearfloat fl">
			<ul>
				<li>
					<a href="#">
						<i class="iconfont icon-shangcheng"></i>
						<p>商城</p>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="iconfont icon-kefu1"></i>
						<p>客服</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="right clearfloat fl">
			<span class="btn fl" onClick="toshare()">加入购物车</span>
			<a href="javascript:void(0)" class="btn btnone fl" @click="confirmCart">立即购买</a>
		</div>
	</div>
	<!--footerone end-->

	<!--这里是弹出购物车内容-->
	<comp2 v-bind:ext2="product"></comp2>
</div>
<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>首页</p>
			</a>
		</li>
		<li class="active">
			<a href="cation.html">
				<i class="iconfont icon-icon04"></i>
				<p>分类</p>
			</a>
		</li>
		<li>
			<a href="shopcar.html">
				<i class="iconfont icon-gouwuche"></i>
				<p>购物车</p>
			</a>
		</li>
		<li>
			<a href="login.html">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
<template id="myComp1">
	<div class="top clearfloat box-s">
		<div class="shang clearfloat">
			<div class="zuo clearfloat fl over2 box-s">
				{{ext.title}}
			</div>
			<div class="you clearfloat fr">
				<i class="iconfont icon-fenxiang"></i>
				<p>分享</p>
			</div>
		</div>
		<div class="xia clearfloat">
			<p class="jifen fl box-s"><samp>¥{{ext.price}}</samp> 或 <samp>{{ext.price}}</samp>积分</p>
			<span class="fr">销量8件</span>
		</div>
	</div>
</template>
<template id="myComp2">
	<div class="am-share">
		<div class="am-share-footer"><button class="share_btn"><img src="img/chahao.png"/></button></div>
		<div class="am-share-sns box-s">
			<div class="sdetail clearfloat">
				<div class="top clearfloat">
					<div class="tu clearfloat fl">
						<span></span>
<!--						<img src="upload/22.jpg"/>-->
						<img :src="'.'+(ext2.image)+'collect.png'" />
					</div>
					<div class="you clearfloat fl">
						<p class="tit">{{ext2.title}}</p>
						<span>¥{{ext2.price}}或{{ext2.price}}积分</span>
					</div>
				</div>
				<div class="bottom clearfloat">
					<p class="fl">购买数量</p>
					<div class="you clearfloat fr">
						<ul>
							<li><img src="img/jian.jpg" id="numDown" onclick="minus()"/></li>
							<li><input id="num" type="text" size="2" readonly="readonly" class="num-text" value="1" style="width: 9px; height: 9px;"></li>
							<li><img src="img/jia.jpg" id="numUp" onclick="add()"/></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
<!--		<a href="confirm.html" class="shop-btn db" @click="sub">确定</a>-->
		<a href="javascript:void(0)" class="shop-btn db" @click="sub">确定</a>
<!--		<input type="button" class="shop-btn db" @click="sub" value="确定"></input>-->
	</div>
</template>
<template id="myComp3">
	<div class="banner swiper-container">
		<div class="swiper-wrapper" id="swiper">

			<div class="swiper-slide" v-for="(item, index) in 4" :key="index">
				<a href="javascript:void(0)">
					<img :src="'.'+(ext3.image)+(index+1)+'_big.png'" class="swiper-lazy" alt="">
				</a>
			</div>
			<!--			<div class="swiper-slide"><img :src="'.'+(prod.image)+'collect.png'" class="img-responsive" /></a></div>-->
			<!--&lt;!&ndash;			<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="upload/21.jpg" alt=""></a></div>&ndash;&gt;-->
			<!--			<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="upload/21.jpg" alt=""></a></div>-->
			<!--			<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="upload/21.jpg" alt=""></a></div>-->
			<!--			<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="upload/21.jpg" alt=""></a></div>-->
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js" ></script>
<script src="slick/slick.js" type="text/javascript" ></script>
<script type="text/javascript" src="js/shopcar.js" ></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script src="js/vue-2.4.0.js" type="text/javascript"></script>
<script src="js/axios_v0.12.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" >
	// import  from
	// Vue.use();
	var map = getPathParams();

	Vue.prototype.$axios=axios;
	var vm = new Vue({
		el: '#app',
		data: {
			product: {},
			drawer: false,
			direction: 'btt',
			activeNames: ['0']
		},
		methods: {
			getProductsByCid(){
				this.$axios({
					//发送请求的方式
					method:'get',
					//请求的地址
					url:'../products/' + map.get("id") + '/get'
				}).then(function (response) {
					console.log("Vue response");

					console.log(response);
					if(response.data.state == 1000){
						vm.product = response.data.data;
						console.log(vm.product);
					}
				})
			},
			createCart() {
				var cart=JSON.stringify({
					cid: vm.product.cid? vm.product.cid: null,
					uid: vm.product.uid? vm.product.uid: null,
					pid: vm.product.id? vm.product.id: null,
					num: document.getElementById('num').value,
					price: vm.product.price? vm.product.price: null
				});
				this.$axios({
					method: 'post',
					url: '../carts/create',
					headers:{
						'Content-Type': 'application/json'
					},
					data: cart,
				}).then(function (response) {
					vm.$axios({
						method: 'post',
						url: '../carts/findCid',
						headers:{
							'Content-Type': 'application/json'
						},
						data: {
							pid: (vm.product.id? vm.product.id: 10000014)
							// cart :{
							// 	pid: (vm.product.id? vm.product.id: 10000014)
							// }
						}
					}).then(function (response) {
						if(response.data.state == 1000){
							vm.product.cid = response.data.data;
							alert("加入购物车成功！");
						}
					})
				}).catch(function (error) {
					console.log(error);
				})
			},
			confirmCart(){
				var cart=JSON.stringify({
					cid: vm.product.cid? vm.product.cid: null,
					uid: vm.product.uid? vm.product.uid: null,
					pid: vm.product.id? vm.product.id: null,
					num: 1,
					price: vm.product.price? vm.product.price: null
				});
				this.$axios({
					method: 'post',
					url: '../carts/create',
					headers:{
						'Content-Type': 'application/json'
					},
					data: cart,
				}).then(function (response) {
					vm.$axios({
						method: 'post',
						url: '../carts/findCid',
						headers:{
							'Content-Type': 'application/json'
						},
						data: {
							pid: (vm.product.id? vm.product.id: 10000014)
							// cart :{
							// 	pid: (vm.product.id? vm.product.id: 10000014)
							// }
						}
					}).then(function (response) {
						if(response.data.state == 1000){
							vm.product.cid = response.data.data;
							window.location.href="confirm.html?cids=" + vm.product.cid + "";
						}
					})
				}).catch(function (error) {
					console.log(error);
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
			},
			handleChange(val) {
				console.log(val);
			}
		},
		mounted:function () {   //自动触发写入的函数
			this.getProductsByCid();
		},
		components: {
			comp1: {
				template: "#myComp1",
				data: function () {
					return {

					}
				},
				props: ['ext']
			},
			comp2: {
				template: "#myComp2",
				data: function () {
					return {

					}
				},
				methods: {
					sub(){
						this.$parent.createCart();
					}
				},
				props: ['ext2']
			},
			comp3: {
				template: "#myComp3",
				data: function () {
					return {

					}
				},
				props: ['ext3']
			}
		}
	});

	function getPathParams(){
		var map=new Map();
		// 获取地址栏中的id参数
		var path=window.location.href;
		var index=path.lastIndexOf("?");
		if(index!=-1){
			var params=path.substring(index+1);
			var array=params.split("&");
			if(array.length>0){
				for(var index in array){
					var arr=array[index].split("=");
					// 将一组参数存入map集合
					map.set(arr[0],arr[1]);
				}
			}
		}
		return map;
	}

	function add() {
		var n = parseInt($("#num").val());
		$("#num").val(n + 1);
	}
	function minus() {
		var n = parseInt($("#num").val());
		if (n == 1) {
			return;
		}
		$("#num").val(n - 1);
	}
</script>
</html>